<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入 Element Plus CSS（CDN 方式） -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <!-- 引入 Tailwind CSS（前缀 tw-，需提前配置好 CDN 或自己部署） 
       这里用了 playground 临时 CDN，生产环境建议自己构建部署！ -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp&prefix=tw-"></script>
    <title>个人主页示例</title>
    <!-- 配置 Tailwind 前缀（必须与 CDN 参数一致） -->
    <script>
      tailwind.config = {
        prefix: "tw-",
      };
    </script>
    <style>
      /* 修复 Element Plus 样式与 Tailwind 前缀冲突问题（可选，根据实际调整） */
      [class^="el-"] {
        all: unset;
        /* 若有样式丢失，可针对性还原 Element Plus 基础样式 */
      }
    </style>
  </head>
  <body class="tw-min-h-screen tw-bg-neutral-900 tw-text-white">
    <!-- 主容器 -->
    <div class="tw-w-full tw-mx-auto tw-max-w-3xl">
      <!-- 顶部背景（可替换为实际背景图） -->
      <div class="tw-relative tw-w-full tw-h-40">
        <img
          src="https://picsum.photos/1080/200"
          alt="背景图"
          class="tw-w-full tw-h-full tw-object-cover"
        />
      </div>

      <!-- 头像与个人信息区 -->
      <div class="tw-relative tw-mt-[-40px] tw-px-4">
        <!-- 头像 -->
        <div
          class="tw-w-20 tw-h-20 tw-rounded-full tw-overflow-hidden tw-border-4 tw-border-neutral-900"
        >
          <img
            src="https://picsum.photos/100"
            alt="头像"
            class="tw-w-full tw-h-full tw-object-cover"
          />
        </div>

        <!-- 信息栏 -->
        <div class="tw-mt-2 tw-flex tw-flex-col tw-space-y-1">
          <h2 class="tw-text-xl tw-font-bold">山竹</h2>
          <p class="tw-text-sm tw-text-neutral-400">抖音号: dywed7a850sj</p>
          <p class="tw-text-sm tw-text-neutral-400">
            你还没有填写个人简介，点击添加...
          </p>
          <p class="tw-text-sm tw-text-neutral-400">
            19岁 爱尔兰 + 添加年龄、学校等标签
          </p>

          <!-- 统计数据 -->
          <div class="tw-flex tw-space-x-4 tw-mt-2">
            <span>0 获赞</span>
            <span>37 关注</span>
            <span>2 粉丝</span>
          </div>

          <!-- 按钮 -->
          <div class="tw-flex tw-space-x-2 tw-mt-2">
            <button
              class="tw-bg-neutral-700 tw-text-white tw px-4 tw-py-2 tw-rounded hover:tw-bg-neutral-600"
            >
              编辑资料
            </button>
            <button
              class="tw-bg-neutral-700 tw-text-white tw px-4 tw-py-2 tw-rounded hover:tw-bg-neutral-600"
            >
              添加随拍
            </button>
          </div>
        </div>
      </div>

      <!-- Tab 栏（作品、动态、喜欢） -->
      <div
        class="tw-flex tw-justify-around tw-border-b tw-border-neutral-800 tw-mt-4"
      >
        <div
          class="tw-py-2 tw-w-1/3 tw-text-center tw-cursor-pointer tw-text-neutral-400"
          onclick="switchTab(0)"
          id="tab-0"
        >
          作品 <span class="tw-text-neutral-500">(0)</span>
        </div>
        <div
          class="tw-py-2 tw-w-1/3 tw-text-center tw-cursor-pointer tw-text-neutral-400"
          onclick="switchTab(1)"
          id="tab-1"
        >
          动态 <span class="tw-text-neutral-500">(0)</span>
        </div>
        <div
          class="tw-py-2 tw-w-1/3 tw-text-center tw-cursor-pointer tw-text-primary"
          onclick="switchTab(2)"
          id="tab-2"
        >
          喜欢 <span class="tw-text-neutral-500">(2)</span>
        </div>
      </div>

      <!-- 内容区（根据 Tab 切换显示） -->
      <div class="tw-p-4">
        <div id="content-0" class="tw-text-neutral-400">作品内容展示...</div>
        <div id="content-1" class="tw-text-neutral-400 tw-hidden">
          动态内容展示...
        </div>
        <div id="content-2" class="tw-text-neutral-400 tw-hidden">
          喜欢内容展示...
        </div>
      </div>

      <!-- 底部导航（模拟） -->
      <div
        class="tw-fixed tw-bottom-0 tw-left-0 tw-w-full tw-flex tw-justify-around tw-bg-neutral-900 tw-border-t tw-border-neutral-800"
      >
        <div
          class="tw-py-2 tw-w-1/5 tw-text-center tw-cursor-pointer tw-text-neutral-400"
          onclick="switchNav(0)"
          id="nav-0"
        >
          首页
        </div>
        <div
          class="tw-py-2 tw-w-1/5 tw-text-center tw-cursor-pointer tw-text-neutral-400"
          onclick="switchNav(1)"
          id="nav-1"
        >
          关注
        </div>
        <div
          class="tw-py-2 tw-w-1/5 tw-text-center tw-cursor-pointer tw-text-neutral-400"
          onclick="switchNav(2)"
          id="nav-2"
        >
          +
        </div>
        <div
          class="tw-py-2 tw-w-1/5 tw-text-center tw-cursor-pointer tw-text-neutral-400"
          onclick="switchNav(3)"
          id="nav-3"
        >
          消息
        </div>
        <div
          class="tw-py-2 tw-w-1/5 tw-text-center tw-cursor-pointer tw-text-primary"
          onclick="switchNav(4)"
          id="nav-4"
        >
          我
        </div>
      </div>
    </div>

    <div id="video-container">
      <div id="video1" class="video-item">11</div>
      <div id="video1" class="video-item">22</div>
    </div>
    <!-- 引入 Element Plus JS（CDN 方式） -->
    <script src="https://unpkg.com/element-plus"></script>
    <script>
      // Tab 切换逻辑
      function switchTab(index) {
        // 隐藏所有内容
        document.querySelectorAll('[id^="content-"]').forEach((el) => {
          el.classList.add("tw-hidden");
        });
        // 显示当前内容
        document
          .getElementById(`content-${index}`)
          .classList.remove("tw-hidden");
        // 切换 Tab 样式
        document.querySelectorAll('[id^="tab-"]').forEach((el) => {
          el.classList.remove("tw-text-primary");
          el.classList.add("tw-text-neutral-400");
        });
        document
          .getElementById(`tab-${index}`)
          .classList.add("tw-text-primary");
      }

      // 底部导航切换逻辑
      function switchNav(index) {
        // 切换 Nav 样式
        document.querySelectorAll('[id^="nav-"]').forEach((el) => {
          el.classList.remove("tw-text-primary");
          el.classList.add("tw-text-neutral-400");
        });
        document
          .getElementById(`nav-${index}`)
          .classList.add("tw-text-primary");
        // 可扩展：根据 index 跳转不同页面或显示不同内容
      }

      // 初始化默认选中
      window.onload = function () {
        switchTab(2); // 默认选中“喜欢”Tab
        switchNav(4); // 默认选中“我”导航
      };
      const videoEl = document.getElementById("video1");
      const videoElClz = document.getElementsByClassName("video-item");
    </script>
  </body>
</html>
